<template>
  <div class="config-view-layout">
    <el-container>
      <el-aside width="300px">

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Dataset</span>
                    </div>
                </template>
                <el-icon><grid /></el-icon>
                <span>op_stat_db.indicator_demo3</span>
            </el-card>
          <!-- <p>Dataset</p>
          <div class="config-view-dateset-box" style="display: flex;">
            <el-icon><grid /></el-icon>
            <span>op_stat_db.indicator_demo3</span>
          </div> -->

        
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>Filters</span>
                        <el-button class="add-btn" type="primary" :icon="Plus" @click="gotoCreate" size="small" />
                    </div>
                </template>
                <div v-for="o in options" :key="o.value" class="filte" @click="filterPopoverShow(o)">
                    <span>{{o.value}}</span>
                </div>
            </el-card>


          <p>Filters</p>
            <el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                :reserve-keyword="false"
                placeholder="Add filter"
            >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
          <!-- <template> -->
            <el-row class="tac">
                <el-col :span="12">
                    <h5 class="mb-2">Columns</h5>
                    <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                    >
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>Navigator One</span>
                            </template>
                            <el-menu-item-group title="Group One">
                                <el-menu-item index="1-1">item one</el-menu-item>
                                <el-menu-item index="1-2">item one</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group Two">
                                <el-menu-item index="1-3">item three</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>item four</template>
                                <el-menu-item index="1-4-1">item one</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </el-row>
        <!-- </template> -->
      </el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
// const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
// const handleOpen = () => {
//     // console.log(key, keyPath)
//     console.log(123);
// }
// const handleClose = () => {
//     // console.log(key, keyPath)
//     console.log(456)
// }
import { Plus, Edit } from '@element-plus/icons-vue'
import { watch, ref } from 'vue'

export default {
    name: 'ConfigView',
    props: ['navIndex'],
    setup(props) {
        const value = ref('')
        const options = [
            {
                value: 'HTML',
                label: 'HTML',
            },
            {
                value: 'CSS',
                label: 'CSS',
            },
            {
                value: 'JavaScript',
                label: 'JavaScript',
            }
        ]

        // 数据显示控制 
        watch(() => props.navIndex, (val) => {
            console.log(val)
        })

        return {
            Plus,
            Edit,
            value,
            options
        }
    }
}
</script>

<style scoped>
    .config-view-layout {
        background: #fff;
    }

    .config-view-layout .el-col {
        width: 100%;
    }
    .config-view-dateset-box {
        display: flex;
        align-items: center;
    }

    .box-card {
        margin-bottom: 10px;
    }

    .box-card ::v-deep .el-card__header {
        padding: 5px 20px;
    }

    .box-card ::v-deep .el-card__body {
        padding: 10px 20px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
    }
</style>
